<template>
  <div ref="container" class="building-table" v-if="buildings.length">
    <div class="left-box">
      <div class="item flex-center" v-for="role in roleList" :key="role.key" v-show="!roleKey || roleKey === role.key">
        <div class="role-abbr">{{ role.abbr }}</div>
      </div>
      <div class="item flex-center" v-for="(floor, index) in floors" :key="index">
        <div class="floor">{{ floor }}层</div>
      </div>
    </div>
    <div class="column-box" v-for="(item, index) in buildings" :key="index">
      <div class="pointer" v-if="item.ratio" @click="progressClick(item)">
        <div class="ratio-content" v-for="role in roleList" :key="role.key" v-show="!roleKey || roleKey === role.key">
          <div class="progress-box">
            <template v-if="item.ratio[role.key]">
              <div class="progress-line" :style="{ width: item.ratio[role.key].realRatio + '%', backgroundColor: item.ratio[role.key].acceptanceCount >= item.ratio[role.key].measure ? '#80c9b5' : '#EB9494' }" />
              <div v-if="item.ratio[role.key].measure !== 0" class="progress-text">{{ item.ratio[role.key].acceptanceCount }}/{{ item.ratio[role.key].measure }}/{{ item.ratio[role.key].inspectionCount }}</div>
            </template>
          </div>
        </div>
      </div>
      <building-plane
        :data="item.table"
        :cell-width="item.unitType === 2 ? 90 : 130"
        :cell-height="28"
        :fixed-width="true"
        :fixed-height="[1, 2].includes(item.unitType)"
        :extend-params="{ checkTableId: item.checkTableId }"
        :style="{ height: floors.length > 0 ? floors.length * 32 + 'px' : '32px' }"
        :active-role-code="roleKey"
        @cellClick="cellClick"
      />
      <div class="floor-footer">{{ item.checkTypeName + '-' + item.checkTableName }}</div>
    </div>
  </div>
</template>
<script>
// 主体楼栋图表
import BuildingPlane from '@/views/statement/components/BuildingPlane'
import { roleList } from '../common'
export default {
  name: 'BuildingTable',
  components: { BuildingPlane },
  props: {
    buildings: { type: Array, default: () => [] },
    floors: { type: Array, default: () => [] },
    roleKey: { type: String, default: '' }
  },
  data() {
    return { roleList }
  },
  methods: {
    progressClick(item) {
      this.$emit('progressClick', item)
    },
    cellClick(data) {
      this.$emit('cellClick', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.building-table {
  display: flex;
}
.left-box {
  position: sticky;
  left: 0;
  z-index: 9;
  height: 100%;
  padding-right: 5px;
  text-align: center;
  .item {
    height: 32px;
    color: #666;
    font-size: 14px;
    background-color: white;
  }
  .floor {
    position: relative;
    width: 35px;
    height: 32px;
    line-height: 32px;
    padding: 0 5px;
    box-sizing: initial;
    border-right: 1px solid #666;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: -6px;
      width: 5px;
      border-top: 1px solid #666;
    }
  }
}
.column-box {
  height: 100%;
  color: #fff;
  margin: 0 3px;
  position: relative;
  .ratio-content {
    display: flex;
    align-items: center;
    padding: 5px 2px;
  }
  .progress-box {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    background-color: #f5f5f5;
    border-radius: 10px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    .progress-line {
      color: #525252;
      background-color: #80c9b5;
    }
    .progress-text {
      position: absolute;
      width: 100%;
      color: #666;
      text-align: center;
    }
  }
  .floor-footer {
    position: absolute;
    color: #333;
    font-size: 13px;
    text-align: center;
    width: 100%;
  }
}
.role-abbr {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #64aeec;
  color: white;
  font-size: 8px;
}
</style>
